<template>
  <div class="cms-views-container bg-[#f6f6f6]">
    <CmsVideoHeader
      :title="'文章'"
      showSearch
      :text="{ color: '#48494D', backgroundColor: 'white' }"
      @click="handleClick('titleTabbar')"
      :class="{ 'component-selected': select === 'titleTabbar' }"
    />

    <!-- 分类宫格 -->
    <CmsCategoryGrid
      :type="1"
      :typeView="'novel'"
      @click="handleClick('categoriesGrid')"
      :class="{ 'component-selected': select === 'categoriesGrid' }"
    />
    <!-- 文章列表 -->
    <div class="mt-5">
      <CmsNovelGrid
        :type="1"
        :typeView="'novel'"
        bgColor
        @click="handleClick('articleList')"
        :class="{ 'component-selected': select === 'articleList' }"
      />
      <CmsNovelGrid :type="1" :typeView="'novel'" bgColor title="最新" />
      <CmsNovelGrid :type="1" :typeView="'novel'" bgColor title="推荐" />
    </div>
  </div>
</template>

<script setup lang="ts">
import CmsComponents from '@cms/components'
import novelIcons from '../assets/novel'
import type { ComponentKeys } from '@cms/h5-editor'

const { CmsCategoryGrid, CmsNovelGrid, CmsVideoHeader } = CmsComponents
withDefaults(defineProps<{ type?: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less"></style>
